// 首页
.home_page{
  flex-grow: 1;
  height: 100%;
  @width1200 : 1200px;
  .width1200{
    width: @width1200;
  }
  // 大背景
  .bigImg{
    background-image: url("../../../assets/home/homebg.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: 840px;
    padding-top: 150px;
    align-items: center;
    position: relative;
    &>img{
      width: 480px;
    }
    &>div{
      margin-top: 70px;
      width: 700px;
    }
    // 黑色导航
    .heiDiv{
      position: absolute;
      bottom: 0px;
      width: 100vw!important;
      height: 130px;
      background-color: rgba(0,0,0,0.7);
      justify-content: center;
      &>ul{
        width: @width1200;
        height: 130px;
        justify-content: space-between;
        li{
          font-size: 16px;
          color: #fff;
          height: 100%;
          align-items: center;
          justify-content: center;
          padding-top: 10px;
          width: 90px;
          cursor: pointer;
          background: url(../../../assets/home/index_navbg.png) no-repeat 15px 20px;
          span{
            width: 60px;
            height: 60px;
            margin-top: -10px;
            background: url(../../../assets/home/index_navjobs.png) no-repeat center center;
          }
          p{
            margin-top: 5px;
          }
          @keyframes shake-horizontal{
            2%{background-position:7px,25px;}
            /*10%{background-position:10px,0px;}*/
            20%{background-position:0px,0px;}
            30%{background-position:-7px,0px;}
            40%{background-position:2px,0px;}
            /*50%{background-position:10px,0px;}*/
            60%{background-position:-5px,0px;}
            70%{background-position:3px,0px;}
            80%{background-position:-4px,0px;}
            /*90%{background-position:9px,0px;}*/
            0%,100%{background-position:0px,0px;}
          }
          &:hover{
            span{
              animation:shake-horizontal 1.5s ease-in-out infinite;
            }
          }
          &:nth-child(2){
            span{
              background: url(../../../assets/home/index_navresume.png) no-repeat center center;
            }
          }
          &:nth-child(3){
            span{
              background: url(../../../assets/home/index_navD.png) no-repeat center center;
            }
          }
          &:nth-child(4){
            span{
              background: url(../../../assets/home/index_navjobfair.png) no-repeat center center;
            }
          }
          &:nth-child(5){
            span{
              background: url(../../../assets/home/index_navcollage_company.png) no-repeat center center;
            }
          }
          &:nth-child(6){
            span{
              background: url(../../../assets/home/index_navdownload.png) no-repeat center center;
            }
          }
          &:nth-child(7){
            span{
              background: url(../../../assets/home/index_disabled_employment.png) no-repeat center center;
            }
          }
          &:nth-child(8){
            span{
              background: url(../../../assets/home/index_navstrategy_cooperation.png) no-repeat center center;
            }
          }
          &:nth-child(9){
            span{
              background: url(../../../assets/home/index_navsocialinquiry.png) no-repeat center center;
            }
          }
        }
      }
    }
  }
  // 友情链接
  .yqlj{
    padding-top: 20px;
    margin-top: 20px;
    background-color: #F9F9F9;
    &>div{
      margin: 0 auto;
      &>p:nth-child(1){
        margin-bottom: 20px;
        span{
          font-weight: bold;
          cursor: pointer;
          font-size: 16px;
          margin-right: 15px;
          &:hover{
            color: #0087ff;
          }
        }
        .active{
          color: #0087ff;
        }
      }
      &>p:nth-child(2){
        margin-bottom: 20px;
        span{
          font-size: 15px;
          text-align: left;
          color: #666;
          margin-right: 41px;
          margin-bottom: 10px;
          cursor: pointer;
          &:hover{
            color: red;
          }
        }
        .active{
          color: red;
        }
      }
    }
  }
  // 版权
  .copyright{
    margin-top: 20px;
    &>div{
      margin: 0 auto;
      &>p{
        margin-bottom: 5px;
        justify-content: center;
        span{
          font-size: 13px;
          text-align: left;
          color: #666;
          margin-right: 5px;
          cursor: pointer;
          &:hover{
            color: #000;
          }
        }
      }
    }
  }
}